<template>
	<div class="middle">
		<div class="middlebg"></div>
		<div class="top">
			<span class="teacher">公告<i class="el-icon-arrow-right"></i></span>
			<span class="addNotice" v-if="rule==2?false:true" @click="addNotice">+发布公告</span>
			<span class="back" @click="back">返回</span>
		</div>
		<el-card class="box-card">
			<div class="card">
				<div class="topMsg">
					类型：<template>
								<el-select class="class" v-model="type" placeholder="公告类型" clearable>
									<el-option v-for="item in batchOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
						</template>
					<el-button type="danger" class="btn" @click="search">搜索</el-button>
				</div>
				<!--表格区域-->
				<el-table ref="singleTable" :data="listNotice" highlight-current-row style="width: 100%">
					<el-table-column property="title" label="标题"  width="400" align="center"></el-table-column>
					<el-table-column property="type" label="类型" width="180" align="center"></el-table-column>
					<el-table-column property="release_time" label="时间" width="180" align="center"></el-table-column>
					<el-table-column label="操作" align="center">
						<template slot-scope="scope">
							<el-button v-if="rule==1?false:true" @click="watch(scope.row.id)" type="success" plain size="mini">查看</el-button>
							<el-button v-if="rule==2?false:true" @click="del(scope.row.id)" type="success" plain size="mini">删除</el-button>
							<el-button v-if="rule==2?false:true" @click="edit(scope.row.id,scope.row)" type="primary" plain size="mini">编辑</el-button>
						</template>
					</el-table-column>
				</el-table>
				<!--消息内容展示-->
				<el-dialog
				  :title="notice.title"
				  :visible.sync="showContent"
				  width="30%"
				  center>
				  <span v-html="notice.contents"></span>
				  <div class="time" style="text-align: right; padding-top: 10px; padding-bottom: 10px;">{{notice.create_time}}</div>
				</el-dialog>
				<!--分页功能-->
				<el-pagination
				   class="fenye"
				   @size-change="SizeChange"
				   @current-change="currentChange"
				   :current-page="page"
				   :page-sizes="pagesizes"
				   :page-size="rows"
				   layout="total, sizes, prev, pager, next, jumper"
				   :total="total"
				   >
				</el-pagination>
				<!-- 发布公告页面 -->
				<el-dialog class="releaseNotice" title="发布公告" :visible.sync="release">
					<el-form label-width="80px" >
						<el-form-item label="公告标题">
							<el-input v-model="titleContent"></el-input>
						</el-form-item>
						<el-form-item label="发布时间">
							<el-date-picker v-model="time"  type="datetime" placeholder="选择日期"></el-date-picker>
						</el-form-item>
						<el-form-item label="公布内容">
							<quill-editor :options="editorOption" v-model="editorContent"></quill-editor>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button type="primary" @click="insertNotice"><i class="el-icon-check">发 布</i></el-button>
					</div>
				</el-dialog>
				<!-- 编辑面板-->
				<el-dialog class="releaseNotice" title="发布公告" :visible.sync="editRelease">
					<el-form label-width="80px" v-model="editNotice">
						<el-form-item label="公告标题">
							<el-input v-model="editNotice.title"></el-input>
						</el-form-item>
						<el-form-item label="发布时间">
							<el-date-picker v-model="editNotice.create_time"  type="datetime" placeholder="选择日期"></el-date-picker>
						</el-form-item>
						<el-form-item label="公布内容">
							<quill-editor :options="editorOption" v-model="editNotice.contents"></quill-editor>
						</el-form-item>
					</el-form>
					<div slot="footer" class="dialog-footer">
						<el-button type="primary" @click="updateNotice"><i class="el-icon-check">发 布</i></el-button>
					</div>
				</el-dialog>
			</div>
		</el-card>
	</div>
</template>

<script>
  import { quillEditor } from 'vue-quill-editor'
	export default {
		data(){
			return {
				rule:'',//登录者身份
				release:false,
				type:'',//公告id
				batchOptions:[
					{
					label:'学校公告',
					value:'1',
					},
					{
					label:'系统公告',
					value:'2',
					},
				],//类型
				staticId:'',//状态id
				staticOptions:[],//存放状态
				rows:6,//每页几条
				page:1,//当前显示页数
				pagesizes:[6,10,15,20],//更改每页显示条数
				total:20,//一共多少条,
				titleContent:'',//发布公告题目
				time:'',//发布公告时间
				editorContent:'',//富文本编辑器内容
				//编辑公告
				editRelease:false,
				editNotice:{
					release_time:'',
					title:'',
					contents:''
				},
				listNotice:[],//公告列表
				showContent:false,
				notice:[],
        editorOption:{
					modules:{
            toolbar:[
              ['bold', 'italic', 'underline', 'strike'],
              ['blockquote', 'code-block'],
						  [{'header':1},{'header':2}],
						  [{'list':'ordered'},{'list':'bullet'}],
						  [{'script':'sub'},{'script':'super'}],
						  [{'indent':'-1'},{'indent':'+1'}],
						  [{'direction':'rtl'}],
						  [{'color':[]},{'background':[]}],
						  [{'align':[]}]
            ]
          }
				}

			}
		},
		methods:{
			//返回上一页
			back(){
				this.$router.push({name:'teaching'})
			},
			//每页显示条数
			SizeChange(val){
				this.rows = val
				this.getListNotice()

			},
			//切换第几页
			currentChange(val){
			  	this.page = val
			  	this.getListNotice()
			},
			//公告列表
			getListNotice(){
				this.$http.post('/api/school_notice/listNotice',{
					page:this.page,
					rows:this.rows,
					type:this.type,
				}).then(res=>{
					this.listNotice = res.data.data
					this.total = res.data.count

				})
			},
			//搜索
			search(){
				this.getListNotice()
			},
			//打开添加公告面板
			addNotice(){
				this.release = true
			},
			//添加公告
			insertNotice(){
				this.$http.post('/api/school_notice/insertNotice',{
					title:this.titleContent,
					release_time:this.time,
					contents:this.editorContent,
				}).then(res=>{
					if(res.data.code == 200) {
						if(res.data.code == 200) {
							this.$message({
								type:'success',
								message:res.data.msg
							})
							this.release = false
							this.getListNotice()
							this.titleContent=''
							this.editorContent=''
							this.time=''
						}else if (res.data.errorCode == 400) {
							this.$message({
								type:'error',
								message:res.data.msg
							})
						}
					}
				})
			},
			//删除公告
			del(id){
				this.$confirm('是否永久删除, 是否继续?', '提示', {
			      confirmButtonText: '确定',
			      cancelButtonText: '取消',
			      type: 'warning'
			    }).then(() => {
			    	this.$http.post('/api/school_notice/deleteNotice', {
			    		id:id
			    	}).then(res=>{
			    		this.getListNotice()
			    		if(res.data.code == 200){
			        		this.$message({
					            type: 'success',
					            message: res.data.msg
					        });
			        	}else if(res.data.errorCode == 400){
			        		this.$message({
					            type: 'error',
					            message: res.data.msg
					        });
			    		}
			    	})

			    }).catch(() => {
			      this.$message({
			        type: 'info',
			        message: '已取消删除'
			      });
			    });
			},
			edit(id){
				this.editRelease = true
				this.$http.post('/api/first/firstSchoolIsRead',{
					id:id
				}).then(res=>{
					this.editNotice = res.data.data

				})

			},
			updateNotice(){
				this.$http.post('/api/school_notice/updateNotice',this.editNotice)
					.then(res=>{
							if(res.data.code == 200) {
								this.$message({
									type:'success',
									message:res.data.msg
								})
								this.editRelease = false
								this.getListNotice()
								this.editNotice.contents=''
								this.editNotice.release_time=''
								this.editNotice.title=''
							}else if (res.data.errorCode == 400) {
								this.$message({
									type:'error',
									message:res.data.msg
								})
							}
					})
			},
			//查看
			watch(id){
				this.$http.post('/api/first/firstSchoolIsRead',{
					id:id
				}).then(res=>{
					this.showContent = true
					this.notice = res.data.data
				})
			},
		},
		created(){
			this.getListNotice()
			//获取到身份
			this.rule = localStorage.getItem('rule')
		}
	}
</script>

<style>
	.el-main {
		padding: 0;
	}
	.middle {
	    height: 100%;
	    width: 100%;
	    background-repeat:repeat;
	    background-size: contain;
	    background-position: center;
	    background-attachment: fixed;
	    z-index: -1;
	}
</style>
<style lang="less" scoped>
	.middlebg {
		position: fixed;
		top: 0;
		left: 0;
		z-index: -1;
		width: 100%;
		height: 100%;
		background: url(../../assets/image/bg-img.png) no-repeat center;
		background-size: 100%;
	}
	.top {
		height: 50px;
		line-height: 50px;
		background-color: #dbdbdb;
		position: relative;
		.teacher {
			display: inline-block;
			background: #00b02d;
			padding:0 15px;
			color: #fff;
		}
		.addNotice {
			display: inline-block;
			background: #3A8EE6;
			height: 24px;
			line-height: 24px;
			position: absolute;
			right: 100px;
			top: 10px;
			padding: 3px 15px;
			font-size: 14px;
			border-radius: 5px;
			color: #fff;
			cursor: pointer;
		}
		.addteacher {
			display: inline-block;
			background: #3A8EE6;
			height: 24px;
			line-height: 24px;
			position: absolute;
			right: 180px;
			top: 10px;
			padding: 3px 15px;
			font-size: 14px;
			border-radius: 5px;
			color: #fff;
			cursor: pointer;
		}
		.back {
			position: absolute;
			right: 0;
			background: #9cbf83;
			padding: 0 15px;
			border-radius: 3px;
			color: #fff;
			cursor: pointer;
		}
	}
	.box-card{
		margin: 30px 50px;
		.card {
			padding: 20px;
		}
		.btn {
			width: 70px;
			height: 40px;
			margin-left: 30px;
		}
		.fenye {
			margin-top: 20px;
			text-align: center;
		}
		/deep/.el-dialog__body {
			padding-bottom: 0;
		}
		.releaseNotice {
			/deep/.ql-editor{
				height: 200px;
        img {
          width: 200px;
          display: block;
        }
			}
		}
		.record {
			.table{
				div {
					border-bottom: 1px solid #eee;
					.left {
						display: inline-block;
						width: 80px;
						height: 3.125rem;
						line-height: 3.125rem;
						text-align: right;
						padding-right: 10px;
					}
					.input {
						width: 200px;
						height: 30px ;
						display: inline-block;
					}
				}
				.textarea {
					border-bottom: 0;
					margin-top: 1.25rem;
					.area {
						display: inline-block;
						width: 80%;
					}
				}
			}
		}
	}
</style>
